<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>作战图图片上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/jquery-ui/jquery-ui.min.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/jqGrid/css/ui.jqgrid.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/artDialog/skins/simple-star.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/star/css/buttons.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/star/css/editEntityTable.css}" />
</head>
<body>
  <div class="edit-container">
    <div>点击下面图标，开始上传图片(可多选，图片文件名必须由数字或字母或下划线或他们的组合组成)</div>
    <img th:src="@{/webjars/star/images/uploadBtn.png}" id="uploadImgBtn" width="72px"> <span id="imgSpan"></span>
  </div>
  <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/jquery.artDialog.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/iframeTools.source.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/jquery-validation/dist/jquery.validate.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/jquery-validation/dist/additional-methods-local.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/star/js/star.utils.js}"></script>
  <script type="text/javascript">
  $(function(){
    var handle = new UtilsHandle({
      basePath: "/",
      uploadImages:{uploadFileId: 'uploadImage', multiple: true, items: [{
        data: {"mark": 0, "of": 1},
        uploadBtn: $('#uploadImgBtn'), 
        success: function (data, textStatus) {
          if(data.code==0){
            for(var o in data.data){
              var pic = data.data[o].original;
              $('#imgSpan').append('<img class="dataImg" width="70px" height="70px" src="'+pic+'" data="'+pic+'">'); 
            }
          }else{
            artDialog.alert(data.msg);
          }
        },
        complete: function (XMLHttpRequest, textStatus) {
          $('.dataImg').unbind().click(function(){
            if($('#viewImg').length>0){ 
              $('#viewImg').remove(); 
            } 
            $('body').append('<img id="viewImg" style="display:none" src="'+$(this).attr("src")+'">');
            $('#viewImg').on("load", function(){
              var w=$(this).width();
              var h=$(this).height();
              var l = w / h;
              if(h > handle.getScreenHeight() * 0.85){
                h = handle.getScreenHeight() * 0.85;
                w = h * l;
              }
              artDialog.alert2('<div style="width:'+w+'px;height:'+h+'px;"><img style="height:'+h+'px" src="'+$(this).attr("src")+'">') 
            }); 
          }); 
        } 
      }]
      }
    });
  });
  </script>
</body>
</html>